<!-- 属性绑定指令:v-bind -->
<!-- 作用:动态设置html的标签属性 比如：src、url、title、class -->

<script setup lang="ts">
import { ref } from 'vue'
const url = ref(
  'https://img1.baidu.com/it/u=1279255852,3746373011&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500',
)

const isShow = ref(true)
const isOrange = ref(true)

const controllClick = () => {
  isShow.value = !isShow.value
  isOrange.value = !isOrange.value
}
</script>

<template>
  <img v-bind:src="url" alt="" />
  <!-- 简写 -->
  <!-- <img :src="url" alt=""> -->

  <!-- 动态绑定class值 -->
  <!-- class="box" :是始终存在的
  :class={类名:是否生效的表达式} -->
  <div class="box" :class="{ myColor: isShow, isOrange: isOrange }" @click="controllClick">
    我是一个盒子
  </div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid white;
}
.myColor {
  background-color: aquamarine;
}
.isOrange {
  border: 10px solid orange;
}
</style>
